<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
    </script>
    </head>
<body>
<div id="dv1" style="width: 800px;height:600px;"></div>
<script>
// 1.基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('dv1'));
// 2.指定图表的配置项和数据
var option = {
title: {
text: '社团热度统计'
},
tooltip: {},
legend: {
data: ['社团人数']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
xAxis: {//x轴
data: []
},
yAxis: {},
series: [
{
name: '社团人数',
type: 'bar',
data: []
}
]
};
//3.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//ajax 请求接口
$.get("/api/association/echarts.do",function(res){
    if(res.code==200){
        option.xAxis.data=res.data.name;
        option.series[0].data=res.data.persons;
        myChart.setOption(option);
    }
})
</script>
</body>
</html>